<template>
  <div>
    <div class="mainComment">
      <div class="info">
        <img :src="logoImg" alt="" />
        <div class="user">
          <div class="name">{{ commentData.user.nickname }}</div>
          <div class="time">{{ commentData.user.create_date.split('T')[0] }}</div>
        </div>
        <div class="btnReply" @click="callReply">
          回复
        </div>
      </div>
      <Parent :parentDepth="parentDepth" :parentData="commentData.parent" @parentCallReply="parentCallReply" v-if="commentData.parent" />
      <div class="content">
        {{ commentData.content }}
      </div>
    </div>
  </div>
</template>

<script>
import Parent from '../comment/Parent'
export default {
  components: {
    Parent
  },
  props: ['commentData', 'logoImg'],
  computed: {
    parentDepth() {
      let depth = 0
      let current = this.commentData
      while (current.parent) {
        depth += 1
        current = current.parent
      }
      return depth
    }
  },
  methods: {
    callReply() {
      this.$emit('callReply', {
        id: this.commentData.id,
        nickname: this.commentData.user.nickname
      })
    },
    parentCallReply(parentInfo) {
      console.log(parentInfo)

      this.$emit('callReply', parentInfo)
    }
  }
}
</script>

<style lang="less" scoped>
.mainComment {
  font-size: 20px;
  color: #333;
  padding: 10px;
  border-bottom: 1px solid #e4e4e4;
}
.info {
  display: flex;
  align-items: center;
  padding: 5.5556vw 0;
  img {
    width: 9.7222vw;
    height: 9.7222vw;
    object-fit: cover;
    border-radius: 50%;
  }
  .user {
    padding: 0 2.7778vw;
    flex: 1;
    font-size: 3.8889vw;
    .time {
      font-size: 3.3333vw;
      color: #888;
    }
  }
}
.content {
  padding: 5.5556vw 0;
  font-size: 4.4444vw;
}
</style>
